<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        select {
          width: 200px;
          height: 200px;
          background-color: #33cccc;
          font-size: 14px;
        }
      </style>    
</head>
<body>
    <script src="js/common.js"></Script>
    <select id="all" size="7" multiple="multiple">
    </select>
    <input type="button" value=">>" id="btn1">
    <input type="button" value="<<" id="btn2">
    <input type="button" value=">" id="btn3">
    <input type="button" value="<" id="btn4">
    <select id="choose" multiple="multiple">
    </select>
    <Script>
        var all = my$("all");
        var choose = my$("choose");
        var btn1 = my$("btn1");
        var btn2 = my$("btn2");
        var btn3 = my$("btn3");
        var btn4 = my$("btn4");

        var fruits = ["苹果","橘子","梨","西瓜","水蜜桃","火龙果","葡萄"];
        for(var i = 0; i<fruits.length;i++){
        var option = document.createElement("option")
        all.appendChild(option);
        option.innerText=fruits[i];
        }
        var n = fruits.length;
        btn1.onclick= function(){
            for(var j = 0; j < n;j++){
                choose.appendChild(all[0]);
            }
        }

        btn2.onclick= function(){
            for(var j = 0; j < n;j++){
                all.appendChild(choose[0]);
            }
        }
       
        // var arr = [];
        btn3.onclick = function(){
            var arr = [];
            fruits = all.children; // 获取 all 中所有的子元素 
            for(var k = 0; k < fruits.length;k++){
                if(fruits[k].selected === true){
                    arr.push(fruits[k]);
                    // console.log(arr);    
                }
            }
            // 对需要移动的固定数组（选中的）每一项进行移动
            for(var n = 0; n < arr.length;n++){
                   choose.appendChild(arr[n]);
                //    因为选中颜色为灰色让其恢复为未选择时的颜色
                arr[n].selected = false;

                }
            }


            btn4.onclick = function(){
            var arr = [];
            fruits = choose.children; // 获取 all 中所有的子元素 
            for(var k = 0; k < fruits.length;k++){
                if(fruits[k].selected === true){
                    arr.push(fruits[k]);
                    // console.log(arr);    
                }
            }
            // 对需要移动的固定数组（选中的）每一项进行移动
            for(var n = 0; n < arr.length;n++){
                   all.appendChild(arr[n]);
            // 因为选中颜色为灰色让其恢复为未选择时的颜色
                arr[n].selected = false;

                }
            }


    </script>   
</body>
</html>